<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-3.5.1.min.js"></script>
</head>
<body>
    <p>文字</p>
    <span class="title"></span>
   <br>
    <img src="" alt="">
    <button onclick="updata()">上一页</button>
    <button onclick="getdata()">下一页</button>

    <script>
        getdata()
        let arr =[]
        function getdata() {
            $.ajax({
                url:'https://api.vvhan.com/api/text/sexy?type=json',
                type:'get',
                success:function(res){
                    arr.push(res.data.content)
                    console.log(res);
                    setdata()
                }
            })
            $.ajax({
                url:'https://api.vvhan.com/api/bing?type=json',
                type:'get',
                success:function(res){
                    $('img').attr('src',res.data.url)
                    $('.title').html(res.data.title)
                   
                    console.log(res);
                   
                }
            })
            
        }
        function setdata() {
            // 渲染数组中的最后一项
            $('p').html(arr[arr.length-1])
            // 将数组的下标赋值到自定义属性上
            $('p').attr('data-index',arr.length-1)
        }
        function updata(params) {
            // 上一条数据，是通过获取当前数组下标减一实现
            let index = $('p').attr('data-index')*1-1
            $('p').html(arr[index])
            $('p').attr('data-index',index)
        }
    </script>
</body>
</html>